<script type="text/javascript" src="../../repo/files/%3Apublic%3Aplugin-samples%3Apentaho-cdf%3Alegacy%3A30-documentation%3A30-component_reference%3AMetaLayerSamples.js"></script>

<div class="shadow">

	<div class="contents">

		<h2>ButtonComponent</h2>

		<h3>Description</h3>
		<p>
		Generates a button to execute a custom command and/or trigger a server action
		</p>

		<h3>Methods</h3>

		<dl class="documentation">
			<dt>enable()</dt>
			<dd>Enables the button.</dd>

			<dt>disable()</dt>
			<dd>Disables the button.</dd>

			<dt>setLabel(text)</dt>
			<dd>Modifies the text label of the button.</dd>
		</dl>

		<h3>Options</h3>

		<dl class="documentation">
			<dt>name</dt>
			<dd>The name of the component</dd>

			<dt>type</dt>
			<dd><code>button</code></dd>

			<dt>listeners</dt>
			<dd><i>Array - </i> Parameters who this component will react to</dd>

			<dt>htmlObject</dt>
			<dd>Id of the component (usually a div or a span tag) to be replaced by the result</dd>

			<dt>refreshPeriod</dt>
			<dd>Time in seconds for this component to refresh. Default is 0 (disabled)</dd>

			<dt>label</dt>
			<dd>Text to be used on the generated button (only used if htmlObject points to a div/span)</dd>

			<dt>buttonStyle</dt>
			<dd>The style of the button to render. Possible values: classic and themeroller. Default: themeroller</dd>

			<dt>expression</dt>
			<dd>Javascript code to be executed when the button is clicked. It the expression evaluates to false, the Action Datasource is not called.</dd>

			<dt>executeAtStart</dt>
			<dd>True to execute the component at start, false otherwise</dd>

			<dt>preExecution</dt>
			<dd><i>Function - </i> Function to be called before the component is executed</dd>

			<dt>postExecution</dt>
			<dd><i>Function - </i> Function to be called after the component is executed</dd>

			<dt>preChange</dt>
			<dd><i>Function(value) - </i> Function to be called before the component is changed</dd>

			<dt>postChange</dt>
			<dd><i>Function(value) - </i> Function to be called after the component is changed</dd>

			<dt>actionDefinition</dt>
			<dd>Datasource to be called when the button is clicked. If the server call is successful, successCallback is called, otherwise failureCallback is called. Optional.</dd>

			<dt>successCallback</dt>
			<dd><i>Function(resultset) </i> Function to be called when the call to the datasource defined in actionDefinition is successful. Optional.</dd>

			<dt>failureCallback</dt>
			<dd><i>Function - </i> Function to be called when the call to the datasource defined in actionDefinition fails. Optional.</dd>

			<dt>tooltip</dt>
			<dd>Tooltip to be displayed when mouse hovers</dd>
		</dl>

		<h3>Sample</h3>

		<div id="example" class="flora">
			<ul>
				<li><a href="#sample"><span>Sample</span></a></li>
				<li><a href="#code"><span>Code</span></a></li>
			</ul>
			<div id="sample">
				<div id="sampleObject"></div>
			</div>

			<div id="code">
				<textarea cols="80" rows="20" id="samplecode">
var executeTopTenCustomers = 
{
  name: "executeTopTenCustomers",
  type: "Button",
  listeners:["productLine", "territory"],
  htmlObject: "sampleObject",
  label: "A button",
  expression: function(){this.setLabel('Yes, a clickable button'); alert('Button was clicked');},
  executeAtStart: true,
  preChange: function(){return true;},
  postChange: function(){return true;},
  successCallback: function(data){},
  failureCallback: function(){},
  tooltip: "My first dashboard"
}
Dashboards.init([executeTopTenCustomers]);
Dashboards.finishedInit = false;
				</textarea>
				<br />
				<button onclick="evaluateCode(true)">Try me</button>
			</div>
		</div>
	</div>
</div>

<script language="javascript" type="text/javascript">

	var tabs = $("#example").tabs();
	evaluateCode(false);
</script>


